<template>
	<view class="login">
		<view class="login_body">
			<!-- logo -->
			<view class="logo ">
				<image class="logo_img" referrerpolicy="no-referrer" :src="Logo" />
			</view>
			<tn-button class="custom-style" :blockRepeatClick="true" backgroundColor="#7265E3" size="lg"
				fontColor="#fff" @click="wxGetUserInfos">手机号一键登录</tn-button>
			<view class="empower">
				<tn-radio-group v-model="Uradio" @change="radios">
					<tn-radio activeColor="#FF5533" name="one">我已阅读并同意</tn-radio>
				</tn-radio-group>
				<view class="empower_bom">
					<!-- <text class="txt">我已阅读并同意</text> -->
					<text class="py" @click="userag">《用户协议》</text>
					<text class="txt">和</text>
					<text class="py" @click="privacy">《隐私政策》</text>
				</view>
			</view>
		</view>


		<!-- 隐私协议 -->
		<view class="privacy">
			<tn-modal ref="uModal" v-model="show" :radius="24" :custom="true" :button="button" :maskCloseable="false"
				:showCloseBtn="false">
				<view class="model-Box">
					<view class="content">{{content}}</view>
					<view class="model-Btn">
						<button @click="cancel">取消</button>
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认</button>
					</view>
				</view>
			</tn-modal>
		</view>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	import logo from "@/static/image/logo.svg"
	import {
		login,
		wxlogin,
		getmobile,
		hasmobile
	} from '@/api/login.js';
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				Logo: logo,
				Uradio: '',
				button: [{
						text: '取消',
						backgroundColor: '#E6E6E6',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],

				formData: {
					phone: '',
					code: ''
				},
				countDown: 0,
				goType: 1,
				openId: '',
				unionid: '',
				shows: false,
				pid: '',
				codeUrl: '',
				show: false,
				content: '我们需要获取您的用户信息权限，我们将使用您的用户信息来个性化为您推荐内容，并提供更好的用户体验。我们承诺不会泄露您的个人信息给任何第三方，并将严格遵守相关的法律法规。您可以在设置中随时更改授权权限，如果您有任何疑问或顾虑，请随时联系我们的客服团队。感谢您的信任和支持！',
				mobile_code: ''
			};
		},
		onShow() {
			// this.pid = uni.getStorageSync('pid');
		},
		onLoad: function(options) {
			this.codeUrl = ''
			if (options && options.q) {
				const url = decodeURIComponent(options.q);
				const match = url.match(/[\?&]id=([^&]*)/);
				const id = match ? match[1] : null; // 提取到的id
				this.codeUrl = id
				console.log(this.codeUrl);
			} else {
				this.codeUrl = ''
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			confirm(e) {
				this.UserProfile()
			},
			cancel() {
				uni.showToast({
					title: '授权已取消',
					icon: 'error',
					mask: true
				});
				this.show = false;
			},
			async getPhoneNumber(e) {
				if (e) {
					this.show = false;
					this.mobile_code = e.detail.code
					uni.login({
						provider: 'weixin',
						onlyAuthorize: true,
						success: async res => {
							if (res.errMsg == 'login:ok') {
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								let aret = {
									mobile_code: this.mobile_code,
									openid: this.openId,
									unionid: this.unionid,
									js_code: res.code,
									mechanism_id: this.codeUrl
								}
								const reslogin = await wxlogin(aret)
								if (reslogin.code === 2000) {
									uni.setStorageSync('userInfo', reslogin.data);
									this.$store.commit('setUserInfo', reslogin.data);
									uni.setStorageSync('token', reslogin.data.access);
									uni.setStorageSync('refresh', reslogin.data.refresh);
									this.$store.dispatch('fetchUserAction');
									this.$store.dispatch('fetchUserInfo');
									uni.hideLoading();
									setTimeout(() => {
										wx.showToast({
											title: '登录成功',
											icon: 'success',
										})
									}, 10)
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										});
									}, 300)
								}
							}
						}
					})
				}
			},
			// 微信授权登录s
			async wxGetUserInfos(e) {

				// 展示加载框
				if (this.Uradio != 'one') {
					this.$refs.toast.show({
						title: '警告',
						content: '请先勾选用户协议及隐私政策',
						icon: '',
						image: '',
						duration: 1500
					})
					return;
				}

				// 登录
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: async res => {
						if (res.errMsg == 'login:ok') {
							hasmobile({
								js_code: res.code
							}).then(async rescode => {
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								this.openId = rescode.data.openid;
								this.unionid = rescode.data.unionid;
								if (rescode.data.has_mobile) {
									let aret = {
										mobile_code: '',
										js_code: res.code,
										openid: this.openId,
									};
									const reslogin = await wxlogin(aret)
									if (reslogin.code === 2000) {
										this.$store.commit('setUserInfo', reslogin.data);
										uni.setStorageSync('userInfo', reslogin.data);
										uni.setStorageSync('token', reslogin.data.access);
										uni.setStorageSync('refresh', reslogin.data.refresh);
										this.$store.dispatch('fetchUserAction');
										this.$store.dispatch('fetchUserInfo');
										uni.hideLoading();

										setTimeout(() => {
											wx.showToast({
												title: '登录成功',
												icon: 'success',
											})
										}, 10)
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/index/index'
											});
										}, 300)

									}
								} else {
									this.show = true;
									uni.hideLoading();
								}
							})

						}
					},
					fail: e => {
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},


			// 声明
			radios(e) {
				this.Uradio = 'one';
			},
			logIn() {
				if (this.goType == 1) {
					this.goType = 2;
				} else {
					this.goType = 1;
				}
			},
			userag() {
				uni.$tn.route('/basicPage/login/userAgreement/userAgreement');
			},
			privacy() {
				uni.$tn.route('/basicPage/login/privacyPolicy/privacyPolicy');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.login {
		background: #F3F3FB;
		height: 100vh;
		overflow: hidden;
		padding: 0 98rpx;

		.login_body {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;

			.logo_img {
				width: 332rpx;
				height: 332rpx;
				margin-bottom: 128rpx;
			}

			.custom-style {
				width: 100%;
				margin-bottom: 80rpx;

				::v-deep button {
					width: 100% !important;
					border-radius: 28rpx !important;
					font-weight: 400 !important;
					font-size: 28rpx !important;
					color: #FFFFFF !important;

				}
			}

			.empower {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 22rpx;
				color: #2D3142;
				line-height: 42rpx;

				::v-deep .tn-radio__label {
					font-size: 22rpx;
					color: #2D3142;
					font-weight: 400;
					margin-right: 0;
					// width: 40rpx !important;
				}

				.empower_bom {
					color: #FF5533;

					.txt {
						color: #2D3142;
					}
				}
			}
		}


		.model-Box {
			.content {
				font-weight: 400;
				font-size: 28rpx;
				color: #818AA6;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.model-Btn {
				display: flex;
				margin-top: 64rpx;

				button {
					width: 256rpx;
					height: 104rpx;
					background: #FFFFFF;
					border-radius: 28rpx;
					border: 2rpx solid #CFD2DC;
					line-height: 104rpx;

					&:nth-child(2) {
						background: #7265E3;
						border-radius: 28rpx;
						margin-left: 46rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>